<template>
	<div>
		<Banner :propspik="bannerList"></Banner>
		<Icons :propsi="iconslist"></Icons>
		<Tabs :propst="tabslist"></Tabs>
		<Scroll :propss="scrolllist"></Scroll>
		<Swiperp :propssw="swiperp"></Swiperp>
		<Spike :propspike='SpikeList'></Spike>
		<Category ></Category>
		<Menu></Menu>
		<BottomNav :propsurl='arrUrl'></BottomNav>
	</div>
</template>

<script>
// 引入Banner组件
import Banner from './pages/Banner.vue'
import Icons from './pages/Icons.vue'
import Tabs from './pages/Tabs.vue'
import Scroll from './pages/Scroll.vue'
import Swiperp from './pages/Swiperp.vue'
import Spike from './pages/Spike.vue'
import Category from './pages/Category.vue'

import Menu from './pages/Menu.vue'
//引入公共子组件——底部
import BottomNav from '../default/BottomNav.vue'
// 导出组件
export default{
	name:'Home',
	// 组件列表的调用
	components:{
		Banner,
		Icons,
		Tabs,
		Scroll,
		Swiperp,
		Spike,
		Category,
		Menu,
		BottomNav,
		
		
	},
	data(){
		return{
			arrUrl : ['img/img11.png','img/img2.png','img/img3.png'],
			bannerList : [],
			iconslist:[],
			tabslist:[],
			scrolllist:[],
			swiperp:[],
			SpikeList:[],
			
			
		}
	},
	//created：当前组件创建之后【el过载之前(标签未渲染)，data函数已经完成了初始化】
	//父组件需要将请求的数据给到子组件的话，满足：1.data函数已经完成初始化；2.响应数据传给子组件（组件已渲染）
	//mouted：组件挂载之后【如果接口复杂/多个接口的时候，优先考虑mouted】
	created(){
		//备份
		let that = this;
		//向dataHome.json文件发起异步请求
		this.axios.get('/api/dataHome.json').then((res)=>{
			
			let data = res.data.Homemsg[0];
			
			//提取banner组件的数据
			that.bannerList = data.BannerVueList;
			//提取Icons组件的数据
			that.iconslist = data.IconsList;
			//提取tabs组件的数据
			that.tabslist = data.TabsList;
			//提取scroll组件的数据
			that.scrolllist = data.ScrollList;
			//提取swiperp组件的数据
			that.swiperp = data.SwiperpList;
			//提取Spike组件的数据
			that.SpikeList = data.SpikeVueList;
			
			
		} ).catch( (error)=>{
			
			console.log(error)
		} )
	}
}
</script>

<style>
</style>
